<template>
  <div>
    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <template #right>
        <van-icon name="cross" size="0.37333334rem" color="white" @click="closeFn"/>
      </template>
    </van-nav-bar>
    <!-- 我的频道 -->
    <div class="my-channel-box">
      <div class="channel-title">
        <span>我的频道
          <span class="small-title">
            {{span}}
          </span>
        </span>
        <span @click="editFn">{{span2}}</span>
      </div>
      <!-- 我的频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="(item) in userChannels" :key="item.id" @click="removeFn(item)">
          <div class="channel-item van-hairline--surround">
            {{item.name}}
            <!-- 删除的徽标 -->
            <van-badge v-show="isEdit && item.id !== 0" color="transparent" class="cross-badge">
              <template #content>
                <van-icon name="cross" class="badge-icon" color="#cfcfcf" size="0.32rem" />
              </template>
            </van-badge>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 更多频道 -->
    <div class="more-channel-box">
      <div class="channel-title">
        <span>点击添加更多频道：</span>
      </div>
      <!-- 更多频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="item in unCheckChannels" :key="item.id" @click="moreFn(item)">
          <div class="channel-item van-hairline--surround">{{item.name}}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ['userChannels', 'unCheckChannels'],
  data () {
    return {
      isEdit: false // 控制切换的变量
    }
  },
  methods: {
    // 编辑按钮的切换
    editFn () {
      this.isEdit = !this.isEdit
    },
    // 更多频道的点击事件
    moreFn (item) {
      if (this.isEdit) {
        this.$emit('addUserChannelsEv', item)
      }
    },
    // 用户选的某一频道
    removeFn (item) {
      if (this.isEdit) {
        // 删除频道,推荐频道不能删除
        if (item.id !== 0) {
          this.$emit('removeChannel', item)
        }
      } else {
        // 切换频道
        // 1:关闭弹出层
        this.$emit('closeEv')
        this.$emit('changeChannel', item)
      }
    },
    // 关闭弹出层
    closeFn () {
      this.$emit('closeEv')
      // 数据初始化一下
      this.isEdit = false
    }
  },
  computed: {
    span () {
      return this.isEdit ? '点击删除频道' : '点击进入频道'
    },
    span2 () {
      return this.isEdit ? '完成' : '编辑'
    }
  }
}
</script>

<style scoped lang="less">
  .van-popup,
  .popup-container {
    background-color: transparent;
    height: 100%;
    width: 100%;
  }

  .popup-container {
    display: flex;
    flex-direction: column;
  }

  .pop-header {
    height: 90px;
    background-color: #007bff;
    color: white;
    text-align: center;
    font-size: 14px;
    position: relative;

    .title {
      width: 100%;
      position: absolute;
      bottom: 15px;
    }
  }

  .pop-body {
    flex: 1;
    overflow: scroll;
    padding: 8px;
    background-color: white;
  }

  .my-channel-box,
  .more-channel-box {
    .channel-title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 28px;
      padding: 0 6px;
    }
  }

  .channel-item {
    font-size: 12px;
    text-align: center;
    line-height: 36px;
    background-color: #fafafa;
    margin: 5px;
  }

  /*删除的微标 */
  .cross-badge {
    position: absolute;
    right: -3px;
    top: 0;
    border: none;
  }

  /*提示文字 */
  .small-title {
    font-size: 10px;
    color: gray;
  }
</style>
